<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Test d'Àlgebra</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <style>
    body {
      font-family: Times New Roman, serif;
      margin: 40px;
      background: #f4f4f4;
    }
    .question-container {
      color: #0077cc;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      transition: background-color 0.3s;
    }
    .options {
      margin-top: 10px;
    }
    .options label {
      display: block;
      margin-bottom: 5px;
    }
    .correct {
      background-color: #d4edda !important;
      color: #155724;
      font-weight: bold;
    }
    .incorrect {
      background-color: #f8d7da !important;
      color: #721c24;
      font-weight: bold;
    }
    #result {
      margin-top: 30px;
    }
  </style>
</head>
<body>

<h2>TEST D'ÀLGEBRA. Seleccioneu la resposta correcta en cada cas: </h2>

<form id="quizForm"></form>

<div style="margin-top: 20px;">
  <button type="button" onclick="calcularResultat()">Enviar respostes</button>
  <button type="button" onclick="reiniciarFormulari()">Netejar i reintentar</button>
</div>

<div id="result">
  <canvas id="resultChart" width="400" height="400"></canvas>
  <div id="feedback"></div>
</div>

 
<script>
const preguntes = [
{
  text: "La matriu \\( \\displaystyle~C=\\left[ \\begin{array}{cc} 9&5\\\\ -10&-6 \\end{array}\\right]~\\):",
  opcions: [
    { text: "És diagonalitzable en \\(~\\displaystyle \\mathbb{R}~\\).", correcta: true },
    { text: "No és diagonalitzable en \\(~\\displaystyle \\mathbb{R}~\\), però sí és triangulable en \\(~\\displaystyle \\mathbb{R}~\\).", correcta: false },
    { text: "És diagonalitzable en \\(~\\displaystyle \\mathbb{C}~\\), però no és diagonalitzable en \\(~\\displaystyle \\mathbb{R}~\\).", correcta: false },
    { text: "És triangulable en \\(~\\displaystyle \\mathbb{C}~\\), però no és diagonalitzable en \\(~\\displaystyle \\mathbb{C}~\\)", correcta: false }
  ]
},
{
  text: "Sabent que la matriu \\( \\displaystyle~H=\\left[ \\begin{array}{cc} -15&-4\\\\ 48&13 \\end{array}\\right]~\\) és diagonalitzable en \\(~\\displaystyle \\mathbb{R}~\\), la matriu  \\( \\displaystyle~H^{100}~\\) val:",
  opcions: [
    { text: "\\( \\displaystyle~\\left[ \\begin{array}{cc} 4\\cdot 3^{100}-3&3^{100}-1\\\\ 12-4\\cdot 3^{101}&4-3^{101} \\end{array}\\right]~\\).", correcta: true },
    { text: "\\( \\displaystyle~\\left[ \\begin{array}{cc} 3^{101}-3&3^{100}-1\\\\ 6-4\\cdot 3^{101}&4-3^{101} \\end{array}\\right]~\\).", correcta: false },    
    { text: "\\( \\displaystyle~\\left[ \\begin{array}{cc} 2\\cdot 3^{100}-3&3^{100}-1\\\\ 12-3^{101}&4-3^{101} \\end{array}\\right]~\\).", correcta: false },
    { text: "Cap de les altres \\( 3 \\) respostes és correcta. ", correcta: false }
  ]
},
{
  text: "La matriu \\( \\displaystyle~L=\\left[ \\begin{array}{ccc} 1&-1&0\\\\ 1&2&-1\\\\ -1&-1&2 \\end{array}\\right]~\\) té dues solucions característiques reals diferents, \\(~\\displaystyle \\lambda_1~\\) (amb multiplicitat 1) \\(~\\)i \\(~\\displaystyle \\lambda_2~\\) (amb multiplicitat 2). \\(~\\)Llavors:",
  opcions: [
    { text: "El subespai propi associat a \\(~\\displaystyle \\lambda_2~~(V_L(\\lambda_2))~\\) té dimensió 2 \\(~\\)i, per tant, \\( \\displaystyle~L~\\) és diagonalitzable en \\(~\\displaystyle \\mathbb{R}\\).", correcta: false },
    { text: "El subespai propi associat a \\(~\\displaystyle \\lambda_1~~(V_L(\\lambda_1))~\\) té dimensió 1 \\(~\\)i, per tant, \\( \\displaystyle~L~\\) és diagonalitzable en \\(~\\displaystyle \\mathbb{R}\\).", correcta: false },    
    { text: "El rang de la matriu \\(~\\displaystyle A-\\lambda_2~I_3~\\) val 2 \\(~\\)i, per tant, \\( \\displaystyle~L~\\) és diagonalitzable en \\(~\\displaystyle \\mathbb{R}\\).", correcta: false },
    { text: "Cap de les altres \\( 3 \\) respostes és correcta. ", correcta: true }
  ]
},
{
  text: "El polinomi característic  \\( \\displaystyle~p_A(x)=det(A-\\lambda I_4)~\\) de la matriu \\( \\displaystyle~A=\\left[ \\begin{array}{cccc} 2&0&1&0\\\\ -4&1&4&2\\\\ 0&-2&3&1\\\\ 1&2&-1&1 \\end{array}\\right]~\\) és:",
  opcions: [
    { text: "\\( \\displaystyle \\lambda^4 + 7\\lambda^3 - 22\\lambda^2 - 45 \\lambda + 45. \\)", correcta: false },
    { text: "\\( \\displaystyle \\lambda^4 - 7\\lambda^3 + 22\\lambda^2 + 45 \\lambda - 45. \\)", correcta: false }, 
    { text: "Cap de les altres \\( \\displaystyle~3~\\) respostes és correcta.  ", correcta: false },
    { text: "\\( \\displaystyle \\lambda^4 - 7\\lambda^3 + 22\\lambda^2 - 45 \\lambda + 45. \\)", correcta: true }
  ]
},
{ 
  text: "Respecte la matriu \\( \\displaystyle~B=\\left[ \\begin{array}{ccc} 1&0&1\\\\ 1&3&-1\\\\ 0&1&2 \\end{array}\\right]~\\):",
  opcions: [
    { text: "Té una única solució característica \\( \\displaystyle ~\\lambda=2~\\), amb multiplicitat \\( \\displaystyle ~3\\).", correcta: true},
    { text: "\\( \\displaystyle \\lambda=1~\\) és solució característica de \\( \\displaystyle B\\), amb mutiplicitat \\( \\displaystyle ~2\\).", correcta: false },
    { text: "Cap de les altres \\( \\displaystyle~3~\\) respostes és correcta.", correcta: false},
    { text: "\\( \\displaystyle \\lambda=-1~\\) és solució característica de \\( \\displaystyle B\\), amb mutiplicitat \\( \\displaystyle ~1\\).", correcta: false}
  ]
}
];



function barrejar(array) {
  return array.sort(() => Math.random() - 0.5);
}

function generarQuestionari() {
  const form = document.getElementById("quizForm");
  form.innerHTML = "";

  preguntes.forEach((pregunta, index) => {
    const opcionsBarrejades = barrejar([...pregunta.opcions]);

    const div = document.createElement("div");
    div.className = "question-container";

    const htmlPregunta = `
      <div class="question">
        <strong>${index + 1}. ${pregunta.text}</strong>
      </div>
      <div class="options">
        ${opcionsBarrejades.map((op, i) => `
          <label>
            <input type="radio" name="q${index}" value="${op.correcta ? 1 : 0}">
            ${op.text}
          </label>`).join('')}
      </div>
    `;

    div.innerHTML = htmlPregunta;
    form.appendChild(div);
  });

  MathJax.typeset();
}

function calcularResultat() {
  const form = document.getElementById('quizForm');
  const formData = new FormData(form);
  let encerts = 0;

  preguntes.forEach((pregunta, i) => {
    const contenedor = form.querySelectorAll(".question-container")[i];
    contenedor.classList.remove("correct", "incorrect");
    const opcions = contenedor.querySelectorAll("input");

    let respostaCorrectament = false;

    opcions.forEach(op => {
      const label = op.closest("label");
      label.classList.remove("correct", "incorrect");

      if (op.checked) {
        if (op.value === "1") {
          label.classList.add("correct");
          respostaCorrectament = true;
          encerts++;
        } else {
          label.classList.add("incorrect");
        }
      }

      // Mostrar la correcta tot i no haver estat seleccionada
      //if (op.value === "1" && !op.checked) {
        //label.classList.add("correct");
      //}
    });

    contenedor.classList.add(respostaCorrectament ? "correct" : "incorrect");
  });

  const percentatge = (encerts / preguntes.length) * 100;
  mostrarGrafic(percentatge);
  mostrarFeedback(percentatge);
  MathJax.typeset();
}

function mostrarGrafic(percentatge) {
  const ctx = document.getElementById('resultChart').getContext('2d');
  if (window.myChart) window.myChart.destroy();
  window.myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Encerts', 'Errades'],
      datasets: [{
        data: [percentatge, 100 - percentatge],
        backgroundColor: ['#4caf50', '#f44336']
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: {
          position: 'bottom'
        }
      }
    }
  });
}

function mostrarFeedback(p) {
  let emoji = '';
  let text = '';
  if (p === 100) {emoji = '&#129321 &#127942'; text = 'Excel.lent, tot correcte. Ho has fet genial!';}
  if (p === 80) {emoji = '&#128513  &#127941'; text = ' Molt bé! Ha faltat només una miqueta.';}
  if (p === 60) {emoji = '&#128515 &#128076'; text = ' Bona feina. Ja gairebé ho tens!';}
  if (p === 40) {emoji = '&#128522 &#128640'; text = ' Vas agafant-li el truc. Segueix així!';}
  if (p === 20) {emoji = '&#128528 &#128692'; text = ' Per algun lloc es comença. No et rendeixis!';}
  if (p === 0) {emoji = '&#128542  &#128170'; text = ' Et recomano repassar els conceptes relacionats i tornar-ho a intentar. Ànims!';}

  document.getElementById('feedback').innerHTML =
    `
    <div style="font-size: 2em; text-align: center; margin-top: 20px;">
      <div style="font-size: 3em;">${emoji}</div>
      <p><strong>Resultat:</strong> ${p.toFixed(0)}%</p>
      <p>${text}</p>
    </div>`;
}


function reiniciarFormulari() {
  const form = document.getElementById('quizForm');
  if (window.myChart) {
    window.myChart.destroy();
    window.myChart = null;
  }
  document.getElementById('feedback').innerHTML = '';
  generarQuestionari(); // reinicia el qüestionari amb ordre nou
}

// Carregar qüestionari a l'inici
generarQuestionari();
</script>

</body>
</html>